<template>
	<view>
		<!-- 头部区域 -->
		<view class="head">
			<view class="head-text">
				支付成功，请您前往指定门店消费
			</view>
			<view class="head-shop">
				<uni-icons class="head-shop-one" color="white" type="shop" size="28"></uni-icons>
			</view>
			<view class="head-location">
				<view class="head-toponym">
					爱坤汽车洗车场(人民路)
				</view>
				<view class="head-road">
					山阳区人民中路
				</view>
			</view>
			<view class="head-navigation">
				<uni-icons class="head-navigation-one" color="white" type="paperplane" size="28"></uni-icons>
			</view>
		</view>
		<!-- 订单区域 -->
		<view class="orders">
			<view class="orders-detail">
				订单详情
			</view>
			<!-- 费用的详情 -->
			<view class="orders-project">
				<view class="orders-project-con" v-for="">
					<view>车辆精洗</view>
					<view>￥199</view>
				</view>
			</view>
			<!-- 原价、优惠、优惠卷 -->
			<view class="orders-pay">
				<view class="orders-pay-con" v-for="">
					<view>原价</view>
					<view>￥199</view>
				</view>
				<!-- 优惠 -->
				<view class="orders-pay-con" v-for="">
					<view>优惠</view>
					<view class="orders-pay-con-one">-￥99</view>
				</view>
				<view class="coupons">
					<view class="coupons-con" v-for="">
						<view>优惠券</view>
						<view>￥199</view>
					</view>
				</view>
			</view>
			<!-- 支付金额 -->
			<view class="pay">
				<view class="pay-con">
					<view>支付金额</view>
					<view class="pay-con-one">￥199</view>
				</view>
			</view>
			<view class="orders-detail">
				订单信息
			</view>
			<!-- 订单信息详情 -->
			<view class="message">
				<view class="message-con">
					<view>订单号：</view>
					<view>￥199</view>
				</view>
				<view class="message-con">
					<view>下单时间：</view>
					<view>2020.13.32</view>
				</view>
				<view class="message-con">
					<view>车辆：</view>
					<view>奔驰/宝马</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 数据部分可以在这里定义
			}
		},
		methods: {
			// 方法部分可以在这里定义
		}
	}
</script>

<style>
	/* 头部样式 */
	.head {
		width: 100%; /* 头部宽度占满100% */
		height: 230rpx; /* 头部高度 */
		background-color: #3982F7; /* 头部背景颜色 */
		display: flex; /* 使用flex布局 */
		flex-wrap: wrap; /* 允许换行 */
	}

	.head-text {
		width: 100%; /* 文本宽度占满100% */
		margin-left: 86rpx; /* 左边距 */
		font-size: 38rpx; /* 字体大小 */
		margin-top: 40rpx; /* 上边距 */
		color: #fff; /* 字体颜色 */
	}

	.head-shop, .head-navigation {
		width: 150rpx; /* 图标区域宽度 */
		height: 100rpx; /* 图标区域高度 */
		display: flex; /* 使用flex布局 */
	}

	.head-shop-one, .head-navigation-one {
		margin: 20rpx 0 0 60rpx; /* 图标的外边距 */
	}

	.head-location {
		width: 420rpx; /* 位置区域宽度 */
		height: 100rpx; /* 位置区域高度 */
		margin-top: 20rpx; /* 上边距 */
	}

	.head-toponym {
		font-size: 30rpx; /* 地名字体大小 */
		font-weight: bold; /* 字体加粗 */
		color: #fff; /* 字体颜色 */
	}

	.head-road {
		font-size: 29rpx; /* 道路字体大小 */
		color: #fff; /* 字体颜色 */
	}

	/* 订单样式 */
	.orders {
		height: 500rpx; /* 订单区域高度 */
		display: flex; /* 使用flex布局 */
		flex-wrap: wrap; /* 允许换行 */
	}

	.orders-detail {
		width: 100%; /* 订单详情宽度占满100% */
		font-weight: bold; /* 字体加粗 */
		margin: 10rpx 0 0 25rpx; /* 外边距 */
		font-size: 35rpx; /* 字体大小 */
	}

	.orders-project, .orders-pay, .pay, .message {
		width: 100%; /* 宽度占满100% */
		background-color: #fff; /* 背景颜色 */
		margin: 12rpx 20rpx; /* 外边距 */
		border-radius: 10rpx; /* 圆角 */
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 阴影效果 */
		padding: 30rpx 25rpx; /* 内边距 */
	}

	.orders-project-con, .orders-pay-con, .coupons-con, .pay-con, .message-con {
		width: 100%; /* 宽度占满100% */
		display: flex; /* 使用flex布局 */
		justify-content: space-between; /* 子元素之间均匀分布 */
		white-space: nowrap; /* 不换行 */
		margin: 8rpx 0; /* 外边距 */
		font-size: 28rpx; /* 字体大小 */
	}

	.orders-project-con view, .orders-pay-con view, .coupons-con view, .pay-con view, .message-con view {
		height: 80rpx; /* 每个view的高度 */
		line-height: 80rpx; /* 行高，确保文本垂直居中 */
	}

	.orders-project-con view:nth-child(0), .orders-pay-con view:nth-child(0), .coupons-con view:nth-child(0), .pay-con view:nth-child(0), .message-con view:nth-child(0) {
		font-size: 35rpx; /* 第一个view的字体大小 */
	}

	.orders-project-con view:nth-child(1), .orders-pay-con view:nth-child(1), .coupons-con view:nth-child(1), .pay-con view:nth-child(1), .message-con view:nth-child(1) {
		font-size: 30rpx; /* 第二个view的字体大小 */
		margin-left: 10rpx; /* 左边距 */
	}

	.orders-project-con view:nth-child(2), .orders-pay-con view:nth-child(2), .coupons-con view:nth-child(2), .pay-con view:nth-child(2), .message-con view:nth-child(2) {
		font-size: 30rpx; /* 第三个view的字体大小 */
		margin-left: auto; /* 右浮动 */
	}

	.orders-pay-con-one, .pay-con-one {
		color: #ff0000; /* 红色字体 */
	}

	.coupons {
		margin-top: 8rpx; /* 上边距 */
		border-top: 1rpx solid #b7b7b7; /* 上边框 */
	}
</style>